// console.log(1);
// 逻辑分析：
/* 判断url地址是否有id参数
如果没id直接跳回列表页
有id
   【1】获取id值 
   【2】根据 id去获取数据
   【3】需要用元素获取
   【4】进行数据的渲染
   【5】给添加到购物车和立即购买
        + 判断是否有登录    
            +   如果有登录直接执行点击事件中操作
            +   如果没有登录 需要去登录页面进行登录
    */
//    let id = location.search;
let reg = /id=\d+/

if (!reg.test(location.href)) {
    location.href = '../html/list.html';
}
let container = document.querySelector(".container")
let id = location.search.split("=")[1];

pAjax({
    url: '../api/getDetail.php',
    data: {
        id
    },
}).then(res => {
    res = JSON.parse(res);
    render(res.detail);
});

function render(data) {
    // console.log(data)
    container.innerHTML = `<ol class="breadcrumb">
    <li><a href="#">详情</a></li>
</ol>
<div class="media">
    <div class="media-left">
        <a href="#">
            <img class="media-object"
                src="${data.goods_big_logo}"
                alt="...">
        </a>
    </div>
    <div class="media-body">
        <h4 class="media-heading">${data.goods_name}
        </h4>
        <div class="price">
            <i class="glyphicon glyphicon-yen"></i>
            <span>${data.goods_price}</span>
        </div>
        <div class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-default">XL</button>
            <button type="button" class="btn btn-default">L</button>
            <button type="button" class="btn btn-default">M</button>
            <button type="button" class="btn btn-default">S</button>
            <button type="button" class="btn btn-default">XS</button>
        </div>

        <div>
            <button class="btn btn-warning btn-lg" id ="buy">立即购买</button>
            <button class="btn btn-danger btn-lg" id="shopping">加入购物车</button>
        </div>
    </div>
</div>

<ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation"><a href="#">Messages</a></li>
</ul>
<div class="goods_detail">
${data.goods_introduce}
</div>`;
}
// console.log(container);
container.onclick = () => {
    let e = window.event;
    if(!(e.target.id =="buy"||e.target.id =="shopping")){
        return;
    }
    // 判断是否登录
    // 添加购物车和购买是根据用户来分类的
    let login = getCookie('login')
    if (!login) {
        let flag = confirm('还没有登录的，需要跳转到登录页面登录?')
        // flag  && (location.href = '../html/login.html');
        if (flag) {
            // setCookie('url', location.href);

            localStorage.setItem("url", location.href);

            location.href = '../html/login.html';
        }
        return
    }

    if (e.target.id == 'buy') {
        console.log('跳转到对应的页面');
    }
    if (e.target.id == 'shopping') {
        // console.log(2);
        addDate(login)
    }

};
async function addDate(username) {
    let res = await pAjax({
        url: "../api/addCarData.php",
        type: 'post',
        data: {
            username: username,
            goods_id: id,
        }
    });
    res = JSON.parse(res);
    if (res.code) {
        let flag = confirm('添加数据成功，是否要跳转到购物车');
        flag && (location.href = "../html/car.html");
    }
}